<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Data Display</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="course_management.html">Course Management</a></li>
            <li><a href="library_management.html">Library Management</a></li>
            <li><a href="social_life.html">Social Life</a></li>
        </ul>
    </nav>
    <div class="container">
        <h1>All Data</h1>
        <div id="dataDisplay"></div>
    </div>
    <script>
        const allData = JSON.parse(localStorage.getItem('allData'));
        if (!allData) {
            console.error('No data found in localStorage.');
            const errorDiv = document.createElement('div');
            errorDiv.textContent = 'No data found in localStorage.';
            document.body.appendChild(errorDiv);
        } else {
            const dataDisplay = document.getElementById('dataDisplay');
            for (const [fileName, data] of Object.entries(allData)) {
                const section = document.createElement('div');
                const title = document.createElement('h2');
                title.textContent = fileName;
                section.appendChild(title);
    
                if (Array.isArray(data)) {
                    if (data.length > 0) {
                        const table = document.createElement('table');
                        const thead = document.createElement('thead');
                        const headerRow = document.createElement('tr');
                        // 定义重点字段
                        const headers = getImportantHeaders(data[0]);
                        headers.forEach(header => {
                            const th = document.createElement('th');
                            th.textContent = header;
                            headerRow.appendChild(th);
                        });
                        thead.appendChild(headerRow);
                        table.appendChild(thead);
    
                        const tbody = document.createElement('tbody');
                        data.forEach(item => {
                            const row = document.createElement('tr');
                            headers.forEach(header => {
                                const td = document.createElement('td');
                                td.textContent = item[header] || '';
                                row.appendChild(td);
                            });
                            tbody.appendChild(row);
                        });
                        table.appendChild(tbody);
                        section.appendChild(table);
                    }
                } else if (typeof data === 'object' && data!== null) {
                    const table = document.createElement('table');
                    const thead = document.createElement('thead');
                    const headerRow = document.createElement('tr');
                    const headers = ['Key', 'Value'];
                    headers.forEach(header => {
                        const th = document.createElement('th');
                        th.textContent = header;
                        headerRow.appendChild(th);
                    });
                    thead.appendChild(headerRow);
                    table.appendChild(thead);
    
                    const tbody = document.createElement('tbody');
                    for (const [key, value] of Object.entries(data)) {
                        const row = document.createElement('tr');
                        const keyCell = document.createElement('td');
                        keyCell.textContent = key;
                        row.appendChild(keyCell);
                        const valueCell = document.createElement('td');
                        if (typeof value === 'object' && value!== null) {
                            valueCell.textContent = JSON.stringify(value, null, 2);
                        } else {
                            valueCell.textContent = value;
                        }
                        row.appendChild(valueCell);
                        tbody.appendChild(row);
                    }
                    table.appendChild(tbody);
                    section.appendChild(table);
                }
    
                dataDisplay.appendChild(section);
            }
        }
    
        function getImportantHeaders(item) {
            const importantKeys = ['username', 'fullName', 'title', 'authors', 'year', 'professor', 'courseId'];
            return Object.keys(item).filter(key => importantKeys.includes(key));
        }
    </script>
</body>

</html>